<template>
  <div class="sanfan">
    <el-container>
      <el-aside class="menuBg" :width="isCollapse?'64px':'220px'">
        <div class="sanfanLogo">
          <!-- <img src="/images/logo.png" alt="logo" class="logo" /> -->
          <span v-if="!isCollapse">智慧水务平台</span>
        </div>
        <!-- 左侧 -->
        <el-menu class="menu" :collapse="isCollapse" unique-opened :default-active="$route.path" router>
          <template v-for="(item,index) in menuList">
            <el-submenu v-if="item.sub.length>0" :index="index.toString()" :key="index">
              <template slot="title">
                <i class="iconfont" :class="item.icon"></i>
                <span slot="title">{{item.title}}</span>
              </template>
              <el-menu-item v-for="(it,i) in item.sub" :key="i" :index="it.path" class="mpl">{{it.title}}</el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="item.path" :key="index">
              <i class="iconfont" :class="item.icon"></i>
              <span slot="title">{{item.title}}</span>
            </el-menu-item>
          </template>
        </el-menu>
        <!-- /左侧 -->
      </el-aside>
      <el-container>
        <el-header class="sanfan-header" height="60px">
          <!-- Header -->
          <div class="fl openCloseMenu f14" @click="handleMenuCollapse">
            <i class="el-icon-caret-right" title="展开菜单" v-if="isCollapse"></i>
            <i class="el-icon-caret-left" title="收起菜单" v-else></i>
          </div>
          <div class="title fl">营销收费系统</div>

          <ul class="trMenu fr">
            <li @click="goUrl('/system/notification')">
              <el-badge :value="0" :max="99">
                <i class="iconfont icon-tongzhi" title="通知"></i>
              </el-badge>
            </li>
            <el-dropdown>
              <li>
                <span class="el-dropdown-link">
                  <el-avatar class="photo" src="/images/userPhoto.jpg"></el-avatar>
                  {{userName}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <div @click="goUrl('/my/help')">
                      <i class="iconfont icon-bangzhu"></i>帮助与反馈
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div @click="goUrl('/my/about')">
                      <i class="iconfont icon-guanyu"></i>关于我们
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <div @click="handleLogout">
                      <i class="iconfont icon-tuichu"></i>退出登录
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </li>
            </el-dropdown>
          </ul>
          <div class="clear"></div>
          <!-- /Header -->
        </el-header>

        <el-main class="sanfan-main loadingMain">
          <!-- 右侧 -->
          <div class="navBar" v-if="showNavBar">
            <el-breadcrumb separator="/" class="sanfan-navBar">
              <el-breadcrumb-item :to="{ path: '/' }">
                <span>概览</span>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="(list,index) in breads" :key="index">{{list}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <nuxt />
          <div class="copyright">
            <a href="http://www.sanfaniot.com/" target="_bank" title="科技有限公司">
              Copyright &copy; 2020
              科技有限公司
            </a>
          </div>
          <!-- /右侧 -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    // middleware: 'check',
    data() {
      return {
        isCollapse: false,
        showNavBar: false,
        breads: [],
        menuList: [{
            icon: "icon-yingyeting",
            path: "/businessCharges",
            sub: [],
            title: "营业收费"
          },
          {
            icon: "icon-chaobiaoguanli",
            path: "",
            sub: [{
                title: "人工抄表",
                path: "/meterReading/manualMeterReading",
                icon: "",
                sub: {}
              },
              {
                title: "抄表记录",
                path: "/meterReading/meterReadingRecord",
                icon: "",
                sub: {}
              },
              {
                title: "抄表册",
                path: "/meterReading/meterReadingBook",
                icon: "",
                sub: {}
              },
              {
                title: "抄表分析",
                path: "/meterReading/meterReadingAnalysis",
                icon: "",
                sub: {}
              },
              // {
              //   title: "特殊抄表",
              //   path: "/meterReading/specialMeterReading",
              //   icon: "",
              //   sub: {}
              // }
            ],
            title: "抄表管理"
          },
          {
            icon: "icon-shoufeiguanli",
            path: "",
            sub: [{
                title: "收费记录",
                path: "/charge/chargeRecord",
                icon: "",
                sub: {}
              },
              {
                title: "补打发票",
                path: "/charge/supplementInvoice",
                icon: "",
                sub: {}
              },
              {
                title: "充值记录",
                path: "/charge/rechargeRecord",
                icon: "",
                sub: {}
              },
              {
                title: "收费分析",
                path: "/charge/chargeAnalysis",
                icon: "",
                sub: {}
              },
              {
                title: "减免操作",
                path: "/charge/reduceOrRemitOperation",
                icon: "",
                sub: {}
              },
              {
                title: "欠费用户",
                path: "/charge/usersInArrears",
                icon: "",
                sub: {}
              }
            ],
            title: "收费管理"
          },
          {
            icon: "icon-kehuguanli",
            path: "",
            sub: [{
                title: "客户信息",
                path: "/customer/customerInformation",
                icon: "",
                sub: {}
              },
              {
                title: "客户查询",
                path: "/customer/customerInquire",
                icon: "",
                sub: {}
              },
              {
                title: "客户分析",
                path: "/customer/customerAnalysis",
                icon: "",
                sub: {}
              }
            ],
            title: "客户管理"
          },
          {
            icon: "icon-xinxiguanli",
            path: "",
            sub: [{
                title: "短信通知",
                path: "/information/SMSNotification",
                icon: "",
                sub: {}
              },
              {
                title: "短信记录",
                path: "/information/SMSRecord",
                icon: "",
                sub: {}
              },
              // {
              //   title: "短信配置",
              //   path: "/information/SMSConfiguration",
              //   icon: "",
              //   sub: {}
              // },
              {
                title: "微信服务",
                path: "/information/wechatService",
                icon: "",
                sub: {}
              }
            ],
            title: "信息管理"
          },
          {
            icon: "icon-baobiaoguanli",
            path: "/report",
            sub: [{
              //   title: "抄表员考核",
              //   path: "/report/assessmentOfMeterReader",
              //   icon: "",
              //   sub: {}
              // },
              // {
                title: "收费员考核",
                path: "/report/assessmentOfTollCollector",
                icon: "",
                sub: {}
              }
            ],
            title: "报表管理"
          },
          {
            icon: "icon-xitongshezhi",
            path: "",
            sub: [{
                title: "用户管理",
                path: "/system/userManagement",
                icon: "",
                sub: {}
              },
              {
                title: "角色管理",
                path: "/system/roleManagement",
                icon: "",
                sub: {}
              },
              {
                title: "权限设置",
                path: "/system/permissionSetting",
                icon: "",
                sub: {}
              },
              {
                title: "系统日志",
                path: "/system/systemLog",
                icon: "",
                sub: {}
              },
              {
                title: "水价设置",
                path: "/system/waterPriceSetting",
                icon: "",
                sub: {}
              },
              {
                title: "区域设置",
                path: "/system/regionalSetting",
                icon: "",
                sub: {}
              },
              {
                title: "公告发布",
                path: "/system/announcementRelease",
                icon: "",
                sub: {}
              },
              {
                title: "数据备份",
                path: "/system/dataBackup",
                icon: "",
                sub: {}
              }
            ],
            title: "系统设置"
          }
        ],
        timer: null,
        userName: sessionStorage.getItem("name") || "管理员"
      };
    },
    watch: {
      $route(now, old) {
        //监控路由变换，控制导航条是否显示
        this.isShowNavBar(now.path);
      }
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    mounted() {},
    async created() {
      var self = this;
      // await self.getMenu();
      self.isShowNavBar(self.$route.path);
    },
    methods: {
      async getMenu() {
        const self = this;
        await self.$axios.post("/service/selfInfoGet").then(res => {
          if (res.data.status === "success") {
            self.menuList = res.data.res.userMenu;
          } else {
            self.$message(res.data.res);
          }
        });
      },
      isShowNavBar(keyPath) {
        //判断是否需要显示导航条
        var self = this;
        var noNavBarUrls = ["", "/", "/my/help", "/my/about"]; //不需要导航条的页面路径
        var set = new Set(noNavBarUrls);
        var hasUrl = set.has(keyPath);
        if (hasUrl) {
          self.showNavBar = false;
        } else {
          self.showNavBar = true;
          self.handleBreads(keyPath);
        }
      },
      goUrl(url) {
        this.$router.push({
          path: url
        });
      },
      handleLogout() {
        let self = this;
        self
          .$confirm("确定要退出当前账号吗？")
          .then(_ => {
            // self.$axios.post("/service/logout").then(res => {
            //   if (res.data.status !== "success")
            //     return self.$message(res.data.res);
            //   localStorage.clear();
            //   sessionStorage.clear();
            //   self.$router.replace("/login");
            // });
          })
          .catch(_ => {});
      },
      handleBreads(path) {
        const self = this;
        for (let item of self.menuList) {
          if (item.sub.length === 0 || Object.keys(item.sub).length === 0) {
            if (item.path === path) {
              self.breads = [item.title];
              return;
            }
          } else {
            for (let It of item.sub) {
              if (It.sub.length === 0 || Object.keys(It.sub).length === 0) {
                if (It.path === path) {
                  self.breads = [item.title, It.title];
                  return;
                }
              } else {
                for (let it of It.sub) {
                  if (it.path === path) {
                    self.breads = [item.title, It.title, it.title];
                    return;
                  }
                }
              }
            }
          }
        }
      },
      handleMenuCollapse() {
        const self = this;
        self.isCollapse = !self.isCollapse;
        if (self.$store.state.refs) {
          self.echartsResizes(self.$store.state.refs);
        }
      }
    }
  };
</script>
<style lang="scss">
  .sanfan {
    .menuBg {
      height: calc(100vh);
      background: #001529;

      .sanfanLogo {
        color: #fff;
        font-size: 22px;
        line-height: 60px;
        font-weight: 500;
        text-shadow: 0 0 4px #000;
        padding: 0px 20px;
        // text-align: center;
        box-shadow: 0 1px 4px rgba(33, 150, 243, 0.33);

        .logo {
          width: 30px;
          vertical-align: text-bottom;
          margin-right: 5px;
          margin-left: -3px;
        }
      }

      .iconfont {
        margin-right: 10px;
        margin-left: 3px;
      }

      .el-menu {
        &.menu {
          height: calc(100vh - 60px);
          overflow-y: auto;
        }

        background: transparent;
        border: 0;
        color: hsla(0, 0%, 100%, 0.65);
        transition: width 0s;

        .mpl {
          padding-left: 50px !important;
        }

        .el-menu-item {
          color: hsla(0, 0%, 100%, 0.65);
        }

        .el-menu-item,
        .el-submenu__title {
          height: 50px;
          line-height: 50px;
        }

        .el-submenu .el-menu-item {
          height: 45px;
          line-height: 45px;
        }

        .el-submenu__title {
          color: hsla(0, 0%, 100%, 0.65);
          background: #001529;

          &:hover {
            color: #fff;

            .iconfont {
              color: #fff;
            }
          }
        }

        .el-menu--inline {

          .el-submenu__title,
          .el-submenu__title:hover {
            background-color: transparent;
          }
        }

        .el-submenu {
          background: #000c17;
        }

        .el-menu-item.is-active {
          background-color: #1890ff !important;
          color: #fff;
        }

        .el-submenu.is-active .el-submenu__title {
          background: #001529;
          color: #fff;

          .iconfont {
            color: #fff;
          }
        }

        .el-menu-item:focus,
        .el-menu-item:hover {
          background-color: transparent;
          color: #fff;
          font-weight: 500;

          .iconfont {
            color: #fff;
          }
        }
      }
    }

    .sanfan-header {
      background: #fff;
      color: rgba(0, 0, 0, 0.65);
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      line-height: 60px;

      .openCloseMenu {
        margin-right: 20px;
        cursor: pointer;
        background: #001529;
        color: #fff;
        margin-left: -22px;
        margin-top: 15px;
        padding: 0 0px;
        height: 30px;
        line-height: 30px;
      }

      .title {
        font-size: 22px;
        font-weight: 500;
        color: #2196f3;
        vertical-align: middle;
      }

      .trMenu {
        .el-badge__content.is-fixed {
          top: 20px;
        }

        li {
          float: left;
          padding: 0 15px;
          cursor: pointer;

          &:hover {
            background: rgba(0, 0, 0, 0.025);
          }

          i {
            font-size: 20px;
          }
        }
      }

      .photo {
        vertical-align: middle;
        margin-right: 10px;
      }

      .el-dropdown-link {
        cursor: pointer;
        // color: #409EFF;
      }

      .el-icon-arrow-down {
        font-size: 12px;
      }
    }

    .sanfan-main {
      height: calc(100vh - 60px);
    }
  }
</style>